<template>
	<div>
		<el-form :inline="true" size="small" :model="queryForm" ref="queryForm" class="demo-form-inline">
			<el-form-item label="品牌名称" prop="brandName">
				<el-input v-model="queryForm.brandName"  placeholder="品牌名称"></el-input>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="doQuery()" size="mini">搜索</el-button>
				<el-button type="info" @click="resetForm()" size="mini">重置</el-button>
				<el-button type="warning" @click="handleadd()" size="mini">新增品牌</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="tableData" >
			<el-table-column type="selection"></el-table-column>
			<el-table-column prop="brandName" label="品牌名称" ></el-table-column>
			<el-table-column prop="brandUrl" label="品牌网址" ></el-table-column>
			<el-table-column prop="brandDescribe" label="品牌描述" ></el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" type="success" @click="handleUpdate(scope.row)">修改
					</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryForm.pageNum" :page-sizes="[3, 5, 8,10]" :page-size="queryForm.pageSize"
			layout="->, total, sizes, prev, pager, next, jumper" :total="totalNum">
		</el-pagination>
	  
	  <!-- 新增品牌对话框 -->
	  <el-dialog title="新增品牌" :visible.sync="addFormVisible" width="600px" append-to-body>
	  	<el-form ref="addform" :model="addform" label-width="80px">
	  		<el-col :span="24">
	  			<el-form-item label="品牌名称" prop="brandName" :label-width="'120px'" required>
	  				<el-input v-model="addform.brandName" placeholder="请输入品牌名称" />
	  			</el-form-item>
	  		</el-col>
	  
	  		<el-col :span="24">
	  			<el-form-item label="品牌网址" prop="brandUrl" :label-width="'120px'">
	  				<el-input v-model="addform.brandUrl" placeholder="请输入品牌网址" maxlength="20" />
	  			</el-form-item>
	  		</el-col>
	  		<el-col :span="24">
	  			<el-form-item label="品牌描述" prop="brandDescribe" :label-width="'120px'">
	  		 	<el-input v-model="addform.brandDescribe" placeholder="请输入品牌描述" maxlength="11" />
	  			</el-form-item>
	  		</el-col>
	  	</el-form>
	  	<div slot="footer" class="dialog-footer">
	  		<el-button @click="addFormVisible = false">取 消</el-button>
	  		<el-button type="primary" @click="addSubmit()">确 定</el-button>
	  	</div>
	  </el-dialog>
	  
	  <!-- 修改品牌对话框 -->
	  <el-dialog title="修改品牌" :visible.sync="editFormVisible" width="600px" append-to-body>
	  	<el-form ref="editform" :model="editform" label-width="80px">
	  		<el-col :span="24">
	  			<el-form-item label="品牌名称" prop="brandName" :label-width="'120px'">
	  				<el-input v-model="editform.brandName" placeholder="请输入品牌名称" />
	  			</el-form-item>
	  		</el-col>
	  		<el-col :span="24">
	  			<el-form-item label="品牌网址" prop="brandUrl" :label-width="'120px'">
	  				<el-input v-model="editform.brandUrl" placeholder="请输入品牌网址" maxlength="20" />
	  			</el-form-item>
	  		</el-col>
	  		<el-col :span="24">
	  			<el-form-item label="品牌描述" prop="brandDescribe" :label-width="'120px'">
	  		 	<el-input v-model="editform.brandDescribe" placeholder="请输入品牌描述" maxlength="11" />
	  			</el-form-item>
	  		</el-col>
	  	</el-form>
	  
	  	<div slot="footer" class="dialog-footer">
	  		<el-button @click="editFormVisible = false">取 消</el-button>
	  		<el-button type="primary" @click="editSubmit()">确 定</el-button>
	  	</div>
	  </el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [],
				// 查询数据
				queryForm: {
					brandName: '',
					brandUrl: '',
					brandDescribe: '',
					pageNum: 1,
					pageSize: 10,
				},
				addform:{
					brandName: '',
					brandUrl: '',
					brandDescribe: '',
				},
				editform:{
					id: '',
					brandName: '',
					brandUrl: '',
					brandDescribe: '',
				},
				editFormVisible:false,
				addFormVisible:false,
				// tabledata中总的数量
				totalNum: 0,
			};
		},
		methods: {
			//重置查询框
			resetForm(){
				this.resetQuryForm();
				this.brandList()
			},
			//重置新增表单
			resetaddFrom(){
				this.addform = {
					brandName: '',
					brandUrl: '',
					brandDescribe: '',
				};
			},
			// 翻页
			handleCurrentChange(val) {
				this.queryForm.pageNum = val;
				this.brandList();
			},
			//刷新数据
			resetQuryForm() {
				this.queryForm = {
					brandName: '',
					brandUrl: '',
					brandDescribe: '',
					pageNum: 1,
					pageSize: 10,
				}
			},
			//改变每页显示的条数
			handleSizeChange(val) {
				this.queryForm.pageSize = val;
				this.queryForm.pageNum = 1;
				this.brandList();
			},
			//根据品牌名称模糊查询
			doQuery(){
				this.brandList();
			},
			//新增信息提交
			addSubmit(){
				this.addFormVisible=false;
				this.$axios.post("/brand", this.addform).then(resp => {
					if(resp.code==20000){
						this.$message.success(resp.msg);
					}else{
						this.$message.error(resp.msg);
					}
					this.brandList();
				})
			},
			//新增弹出框
			handleadd(){
				this.resetaddFrom();
				this.addFormVisible = true;
			},
			//修改提交数据
			editSubmit() {
				this.editFormVisible = false;
				this.$axios.put("/brand/edit", this.editform).then(resp => {
					if (resp.code == 20000) {
						this.$message.success(resp.msg);
					} else {
						this.$message.error("修改失败");
					}
					this.brandList();
				})
			},
			//获取修改参数
			handleUpdate(row) {
				this.editFormVisible = true;
				this.editform = JSON.parse(JSON.stringify(row));
			},
			//删除
			handleDelete(row) {
				console.log(row);
				this.$confirm(`此操作将永久删除名称为 ${row.brandName} 的数据, 是否继续?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
				this.$axios.delete(`/brand/delete/${row.id}`).then(resp => {
							this.brandList();
						});
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			brandList() {
				this.$axios.get("/brand/getBrandAll", {
						params: this.queryForm
					}).then(resp => {
					this.tableData = resp.list;
					this.totalNum = resp.total;
				})
			},
		},
		mounted() {
			this.brandList();
		}
	}
</script>

<style>
</style>
